<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Peppa Pig</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- ground -->
    <div class="ground">
      <div>
        <div class="flower1 flower0">
          <div class="petal1"></div>
          <div class="petal2"></div>
          <div class="center"></div>
        </div>
        <div class="pole pole1"></div>
      </div>
      <div class="flower1 flower2">
        <div class="petal1"></div>
        <div class="petal2"></div>
        <div class="center"></div>
      </div>
      <div class="pole pole2"></div>
      <div class="flower1 flower3">
        <div class="petal1"></div>
        <div class="petal2"></div>
        <div class="center"></div>
      </div>
      <div class="pole pole3"></div>
      <div class="flower1 flower4">
        <div class="petal1"></div>
        <div class="petal2"></div>
        <div class="center"></div>
      </div>
      <div class="pole pole4"></div>
      <div class="muds muds1"></div>
      <div class="muds muds2"></div>
      <div class="muds muds3"></div>
      <div class="muds muds4"></div>
    </div>

    <!-- peppa -->
    <div id="peppa">
      <div class="ear ear-left"></div>
      <div class="ear ear-right"></div>
      <div class="eye eye-left"></div>
      <div class="eye eye-right"></div>
      <div class="eye2 eye2-left"></div>
      <div class="eye2 eye2-right"></div>
      <div class="eye3 eye3-left"></div>
      <div class="eye3 eye3-right"></div>

      <div class="cheek"></div>

      <div class="mouth"></div>

      <div class="nose1"></div>
      <div class="nose3"></div>
      <div class="nose2"></div>

      <div class="face1"></div>
      <div class="face2"></div>

      <div class="body">
        <div class="left-hand">
          <div class="arm"></div>
          <div class="finger"></div>
          <div class="finger finger2"></div>
          <div class="finger finger3"></div>
        </div>
        <div class="right-hand">
          <div class="arm"></div>
          <div class="finger"></div>
          <div class="finger finger2"></div>
          <div class="finger finger3"></div>
        </div>
        <div class="right-hand"></div>
        <div class="body-Bottom"></div>
        <div class="tail1"></div>
      </div>
      <div class="leg"></div>
      <div class="leg leg2"></div>

      <div class="foot">
        <div class="left-foot">
          <div class="foot1"></div>
          <div class="foot1 foot2"></div>
          <div class="foot3"></div>
        </div>
        <div class="right-foot">
          <div class="foot1"></div>
          <div class="foot1 foot2"></div>
          <div class="foot3"></div>
        </div>

        <div class="mud"></div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>
